import React, { useEffect, useState } from 'react';
import { Button, Drawer, Modal } from 'antd';

function MyDrawer(props: { open: boolean; onClose: () => void; parentId: string }) {
  const { onClose, open, parentId } = props;
  const [openModal, setOpenModal] = useState(false);
  const [ID, setID] = useState('');
  useEffect(() => {
    setID(Math.random().toString(36).substring(2, 7).toUpperCase());
  }, []);
  return (
    <>
      {openModal && (
        <MyModal
          open={openModal}
          onClose={() => {
            setOpenModal(false);
          }}
          parentId={ID}
        ></MyModal>
      )}
      <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
        <p>open by: {parentId}</p>
        <p>Drawer ID: {ID}</p>
        <Button onClick={() => setOpenModal(true)}>弹出modal</Button>
      </Drawer>
    </>
  );
}
function MyModal(props: { open: boolean; onClose: () => void; parentId: string }) {
  const { onClose, open, parentId } = props;
  const [openDrawer, setOpenDrawer] = useState(false);
  const [ID, setID] = useState('');
  useEffect(() => {
    setID(Math.random().toString(36).substring(2, 7).toUpperCase());
  }, []);

  return (
    <>
      {openDrawer && (
        <MyDrawer
          open={openDrawer}
          onClose={() => {
            setOpenDrawer(false);
          }}
          parentId={ID}
        ></MyDrawer>
      )}
      <Modal title="Basic Modal" open={open} onOk={onClose} onCancel={onClose}>
        <p>open by: {parentId}</p>
        <p>Modal ID: {ID}</p>
        <Button onClick={() => setOpenDrawer(true)}>弹出drawer</Button>
      </Modal>
    </>
  );
}

function TestDrawerAndModal() {
  const [openDrawer, setOpenDrawer] = useState(false);
  return (
    <>
      <Button onClick={() => setOpenDrawer(true)}>开启</Button>
      <MyDrawer
        parentId="ROOT"
        open={openDrawer}
        onClose={() => {
          setOpenDrawer(false);
        }}
      ></MyDrawer>
    </>
  );
}

export default TestDrawerAndModal;
